<template>
  <div class="admin-page-content">
    <div class="has-top-from-bottom">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="服务名称">
          <el-input placeholder="支持模糊检索" v-model="query.search" clearable></el-input>
        </el-form-item>
        <el-form-item label="调用日期">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            @change="changeDate"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left:30px;">
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="multipleTable" size="small" :border="true" tooltip-effect="dark" 
      style="width: 100%;margin-top:30px;" :data="data" v-loading="loading" @sort-change="sortData">
        <el-table-column label="服务名称" prop="appName"></el-table-column>
        <el-table-column label="使用人数" prop="userCount" sortable></el-table-column>
        <el-table-column label="使用次数" prop="useCount" sortable></el-table-column>
        <el-table-column label="平均时间" prop="avgTime" sortable>
          <!-- <template slot-scope="scope">
            {{scope.row.avgTime}} ms
          </template> -->
        </el-table-column>
        <el-table-column label="最大时间" sortable prop="maxTime">
          <!-- <template slot-scope="scope">
            {{scope.row.maxTime}} ms
          </template> -->
        </el-table-column>
        <el-table-column label="最大返回参数" sortable prop="maxRespSize"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="tips-top" effect="dark" content="详情" placement="top">
              <div class="icon-table info-icon" @click="ServiceInfo(scope.row)"></div>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="query.pageNumber"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="query.pageSize"
          layout="sizes, prev, pager, next"
          :total="total">
        </el-pagination>
        <span class="span-pagination">共{{ Math.ceil(total/query.pageSize) }}页，{{total}}条数据</span>
      </div>
  </div>
</template>
<script>
import { queryServiceStatList } from '@/api/admin/service_census';
import moment from 'moment';
export default {
  data() {
    return {
      date:'',
      query: {
        search: '',
        startDate: '',
        endDate: '',
        pageNumber: 1,
        pageSize: 10,
      },
      data:[],
      total: 0,
      loading: true,
    }
  },
  mounted() {
    this.getServiceStatList()
  },
  methods: {
    moment,
    sortData(column) {
      const vm = this;
      if (column.order) {
        vm.query.upOrDown = column.order === 'descending' ? 1 :0
        vm.query.orderField = column.prop;
        vm.getServiceStatList()
      }
    },
    // 查询
    onSubmit(){
      this.query.pageNumber = 1;
      this.getServiceStatList()
    },
    async getServiceStatList() {
      const vm = this;
      vm.loading = true;
      let response = await queryServiceStatList(vm.query);
      vm.loading = false;
      if (response.code === '20000') {
        vm.data = response.data.list;
        vm.total = response.data.total;
      }
    },
    // 选择时间回调
    changeDate(val){
      this.query.startDate = moment(val[0]).format('YYYY-MM-DD');
      this.query.endDate = moment(val[1]).format('YYYY-MM-DD');
    },
    // 查看详情
    ServiceInfo(row) {
      this.$router.push({
        path: '/admin/service-cous/info',
        query: {
          id: row.appId
        }
      })
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getServiceStatList()
    },
    handleCurrentChange(val) {
      this.query.pageNumber = val
      this.getServiceStatList()
    }
  }
}
</script>